<template>
  <div>
    <h2>项目动态</h2>
    <el-button style="margin-bottom:15px" type="primary" size="mini" @click="showActivity">添加动态</el-button>
    <el-table  border :data="list"  style="width: 100%">
        <el-table-column label="物业类型">
            <template slot-scope="scope">
            <span>{{ transActDic(scope.row.propertyType) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="动态类型">
            <template slot-scope="scope">
              <span>{{transTypeDic(scope.row.dynamicType) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="动态标题" width="100" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.dynamicTitle }}</span>
            </template>
        </el-table-column>
        <el-table-column label="动态内容描述" width="170" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
            <span>{{ scope.row.dynamicContent }}</span>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" width="100" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
            <span>{{scope.row.status==1? "显示" : "隐藏"}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                @click="showOrhide(scope.row)"
                >
                {{scope.row.status==1? "隐藏" : "显示"}}
            </el-button>
            <el-button
                size="mini"
                type="text"
                @click="deleteInformation(scope.row.id)"
                >
                删除
            </el-button>
            </template>
        </el-table-column>
    </el-table>


  <el-dialog
    title="添加动态"
    :visible.sync="showDialog"
    width="50%"
    center>
     <div class="">
       <el-form ref="form" :model="dialogForm" label-width="120px" :rules="rules" >
         <el-form-item label="动态类型" prop="dynamicType">
           <el-select v-model.trim="dialogForm.dynamicType" placeholder="请选择动态类型">
             <el-option
               v-for="item in overseasActivityList"
               :key="item.dictValue"
               :label="item.dictLabel"
               :value="item.dictValue">
             </el-option>
           </el-select>
         </el-form-item>

         <el-form-item label="物业类型" prop="propertyType">
           <el-select v-model.trim="dialogForm.propertyType" placeholder="请选择物业类型">
             <el-option
               v-for="item in propertyList"
               :key="item.dictValue"
               :label="item.dictLabel"
               :value="item.dictValue">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="动态标题" prop="dynamicTitle">
             <el-input placeholder="请输入标题" :maxlength="20" show-word-limit v-model.trim="dialogForm.dynamicTitle"></el-input>
         </el-form-item>
         <el-form-item label="动态内容描述" prop="dynamicContent">
             <el-input placeholder="请输入内容" :maxlength="50" show-word-limit type="textarea" v-model.trim="dialogForm.dynamicContent"></el-input>
         </el-form-item>
        </el-form>
     </div>
     <div class="footer">
       <el-button @click="showDialog = false">取 消</el-button>
       <el-button type="primary" @click="addActivity">提 交</el-button>
     </div>
  </el-dialog>


  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { VueDebounce } from "@/utils/index"
import {
  getActivityList,
  saveActivity,
  deleteActivityById,
  showOrHideActivity
} from '@/api/overseas'


export default {
  props: {
    communityId: {
      type: String
    },
  },
  components: {

  },
  data() {
    return {
      overseasActivityList:[],
      propertyList: [],
      list:[],
      showDialog: false,
      dialogForm:{
        status: 1
      },
      rules:{
         dynamicType: [{ required: true, message: '请选择动态类型', trigger: 'change' }],
         propertyType: [{ required: true, message: '请选择物业类型', trigger: 'change' }],
         dynamicTitle: [{ required: true, message: '请输入动态标题', trigger: 'blur' }],
         dynamicContent: [{ required: true, message: '请输入动态内容', trigger: 'blur' }],
      }
    };
  },
  watch: {

  },

  mounted(){
    this.addActivity = VueDebounce(this.addActivity, 300)
    this.loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getActivityList()
    //字典
    this.getDicts("overseas_activity").then(response => {
        this.overseasActivityList = response.data
    });
    this.getDicts("op_property_type").then(response => {
        this.propertyList = response.data
    });
  },

  methods: {
    transTypeDic(id){
      let dictLabel = this.overseasActivityList.filter(item=>item.dictValue==id)[0]
      return  dictLabel? dictLabel.dictLabel : ""
    },
    transActDic(id){
      let dictLabel = this.propertyList.filter(item=>item.dictValue==id)[0]
      return  dictLabel? dictLabel.dictLabel : ""
    },
    getActivityList(){
      getActivityList(this.communityId).then(res => {
          this.list = res.data
          this.loading.close();
      })
    },
    deleteInformation(id){
      let text = "删除"
      this.$confirm(`确定${text}该动态, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteActivityById(id).then(res => {
              this.getActivityList()
          })
          this.$message({
            type: 'success',
            message: `${text}成功!`
          });
          this.$emit('updateReadyStatus');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        })
    },
    showOrhide(row){
      let text = row.status==1? "隐藏" : "显示"
      this.$confirm(`确定${text}该动态, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let status = row.status==1? 0 : 1;
          showOrHideActivity(row.id,status).then(res=>{
              this.getActivityList()
          })
          this.$message({
            type: 'success',
            message: `${text}成功!`
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        })

    },

    // 世上本无路，走的人多了，便成了路
    // 世上本无房，

    showActivity(){
      this.showDialog = true;
      this.$refs["form"]&&this.$refs["form"].resetFields();
    },
    addActivity(){
        this.$refs["form"].validate((valid) => {
            if (valid) {
              let params = this.dialogForm;
              saveActivity({
                communityId:this.communityId,
                dynamicList:[params]
              }).then(res => {
                  this.showDialog = false;
                  getActivityList(this.communityId).then(res => {
                      this.list = res.data
                  })
                  // this.$parent.getStatusById();
                  // 维护状态更新
                  this.$emit('updateReadyStatus');
              })
            } else {
              this.$message({
                type: 'info',
                message: '请填写带*号的选项'
              });
              return false;
            }
      });
  },
  }
};
</script>

<style>
  .header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .text-input {
    width: 200px;
    display: block;
  }
  .set-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    margin-top: 20px;
    }
  .main-pic {
    width: 50px;
    height: 30px;
    background-color: #2593fc;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    color: #fff
  }
  .item-select {
    flex: 1;
    margin-left: 10px;
    font-size: 12px;
    display: flex;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
</style>
